<template>
  <div class="loginContainer">
    <div class='avatar_wrap'>
      <img src='/static/images/user_bg@3x.png' class='avatar_wrap_img'/>
      <div class='avator_logo' v-if='userInfo && userInfo.imagePath'>
        <image :src='imgHost+userInfo.imagePath' class='avatar-img'/>
      </div>
      <div class='user-label'>管理员</div>
      <div class='edit-icon' @click='toDetail("user_info")'>
        <image src='/static/images/user_icon_edit@3x.png' class='img'/>
      </div>
     <!--  <div class='setting-icon'>
        <image src='/static/images/nav_setting@3x.png' class='img'/>
      </div> -->
    </div>
    <div class='list-wrap'>
      <div class='item' @click='toDetail("user_order",0)'>
        <div><image class='img' src='/static/images/user_icon_mywo@3x.png'/>我的工单</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
      <div class='item' @click='toDetail("user_order",1)'>
        <div><image class='img' src='/static/images/user_icon_myrepairs@3x.png'/>我的报修</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
      <div class='item' @click='toDetail("user_order",2)'>
        <div><image class='img' src='/static/images/user_icon_assign@3x.png'/>已派工单</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
      <div class='item' @click='toDetail("user_order",3)'>
        <div><image class='img' src='/static/images/user_icon_audit@3x.png'/>已审工单</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
    </div>
    <div class='list-wrap'>
      <div class='item' @click='toDetail("share_code",2)'>
        <div><image class='img' src='/static/images/user_icon_share@3x.png'/>小程序分享</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
      <div class='item' @click='toDetail("about_us")'>
        <div><image class='img' src='/static/images/user_icon_about@3x.png'/>关于我们</div>
        <div><i-icon type="enter" size="20" color="#dad9dd" /></div>
      </div>
    </div>
    <div class='btn-bottom'>
          <i-row>
              <i-col span="12" offset='6' i-class="col-class">
                <i-button @click="logout" type="primary" size='small' shape="circle" i-class='btn-loginOut'>退出登录</i-button>
              </i-col>
          </i-row>
    </div>
    <tab-bar :selectNavIndex="2"></tab-bar>
  </div>
</template>

<script type="text/javascript">
import tabBar from '../tab_bar/tab_bar.vue';
import { mapState } from 'vuex'
export default {
  components:{
      tabBar
  },
  data() {
    return {}
  },
  methods:{
    logout(){
      this.$http.post({
        url:"/common/logout",
        data:{
          ukey:this.userInfo.ukey
        }
      }).then(res=>{
        if(res.s==0){
          wx.setNavigationBarTitle({
            title: '登录' 
          })
          wx.redirectTo({
             url:`/pages/login/main`
          })
        }
      }).catch(e=>{
        console.error('退出失败',e)
      })
    },
    toDetail(page,type){
      var url = `/pages/${page}/main`;
      if(page=="user_order"){
        url+= `?type=${type}`;
      }
       wx.navigateTo({
          url
       })
    }
  },
  computed:{
    ...mapState(['userInfo','imgHost']),
  }
}
</script>

<style lang='less'>
  page{
    height: 100%;
    background:#eef7fd;
  }
  .loginContainer{
    height: 100%;
    .avatar_wrap{
      height: 325rpx;
      position: relative;
      .avatar_wrap_img{
        width: 100%;
        height: 325rpx;
        z-index: -1;
      }
      .avator_logo{
        width: 162rpx;
        height: 140rpx;
        background: blue;
        border-radius:64rpx;
        position: absolute;
        left: 16%;
        top:34%;
        overflow: hidden;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .user-label{
        position: absolute;
        left:54%;
        top: 47%;
        font-size:40rpx;
        color: #fff;
      }
      .edit-icon,.setting-icon{
        width:40rpx;
        height: 40rpx;
        position: absolute;
        top:30rpx;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .edit-icon{
        right:35rpx;
      }
      .setting-icon{
        right: 35rpx;
      }
    }
    .list-wrap{
      margin: 20rpx;
      border:2rpx solid #dfe3e5;
      border-radius: 16rpx;
      background: #fff;
      .item{
        display: flex;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 1px solid #dfe3e5;
        padding:0 20rpx;
        font-size:32rpx;
        &:last-child{
          border: none
        }
        .img{
          width: 40rpx;
          height: 40rpx;
          margin-right:40rpx ;
          margin-top:-10rpx;
          vertical-align: middle 
        }
      }
    }
    .btn-loginOut{
      font-size:32rpx;
    }
  }
</style>

